<template>
  <div class="time-picker">
    <table class="week-time-table" cellpadding="0" cellspacing="0">
      <thead class="week-time-head">
        <tr>
          <th rowspan="8" class="week-td">星期/时间</th>
          <th colspan="24" @click="choose12(23)">00:00 - 12:00</th>
          <th colspan="24" @click="choose24">12:00 - 24:00</th>
        </tr>
        <tr class="hour">
          <td
            @click="chooseOneHour(item)"
            v-for="item in hours"
            :key="item"
            colspan="2"
          >
            {{ item }}
          </td>
        </tr>
      </thead>
      <tbody class="week-time-body">
        <tr v-for="(item, index) in weekday" :key="index">
          <td class="week-td">{{ item.weekday }}</td>
          <td
            @click="chooseTime(time, i)"
            v-for="(time, i) in item.times"
            :class="{ selected: time.selected }"
            :data-row="index"
            :data-col="time.index"
            :key="i"
            colspan="1"
          ></td>
        </tr>
      </tbody>
      <tfoot class="week-time-foot">
        <tr>
          <td colspan="49" class="td-table-tip">
            <div class="clearfix">
              <span class="tip-text"> 已选择时间段 </span
              ><a class="right"> 清空选择 </a>
            </div>
            <div class="td-selected-time">
              <p>
                <span class="tip-text"> 星期一： </span><span>00:00~00:30</span>
              </p>
            </div>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
const weekdayMap = [
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日",
];
const dayTimeMap = Array.from({ length: 24 }).map((_, i) => i);
export default {
  data() {
    return {
      time: "123",
      hours: dayTimeMap,
      weekday: weekdayMap.map((item, i) => {
        return {
          weekday: item,
          index: i,
          times: Array.from({ length: 48 }).map((_, i) => {
            return {
              index: i,
              selected: false,
            };
          }),
        };
      }),
    };
  },
  methods: {
    // 选择单个时间
    chooseTime(item, i) {
      console.log(item, i);
      item.selected = !item.selected;
    },
    // 选择周一到周日00:00-12：00
    choose12(condition = 23) {
      console.log(condition);
      for (let i in this.weekday) {
        let times = JSON.parse(JSON.stringify(this.weekday[i].times))
        const hasSelect = this.weekday[i].times.some(it=>it.selected)
        const allSelect = this.weekday[i].times.every(it=>it.selected)
        console.log(this.weekday[i].times)
        console.log(allSelect)
        const noneSelect = this.weekday[i].times.every(it=>!it.selected)
        for (let j in this.weekday[i].times) {
          let item = this.weekday[i].times[j];
          if (condition == 23) {
            if (j <= condition) {
                // 部分选择
                if(hasSelect && !allSelect || noneSelect){
                    item.selected = true;
                }
                // 全选
                if(allSelect){
                    item.selected = false
                }
            }
          } else {
            if (j <= condition && j > 23) {
                if(hasSelect && !allSelect){
                    item.selected = true;
                }
                if(allSelect){
                    item.selected = false
                }
            }
          }
        }
      }
    },
    // 选择周一到周日12:00-24:00
    choose24() {
      this.choose12(47);
    },
    // 选择同一小时下，周一到周日
    chooseOneHour(index) {
      for (let i in this.weekday) {
        for (let j in this.weekday[i].times) {
          let item = this.weekday[i].times[j];
          let after = this.weekday[i].times[index * 2 + 1];
          console.log(12);
          if (j == index * 2) {
            item.selected = !item.selected;
            after.selected = !after.selected;
            break;
          }
        }
      }
    },
  },
  mounted() {
    console.log(this.weekday);
  },
};
</script>
<style lang="less" scoped>
.time-picker {
  width: 100%;
  border: 1px solid #ccc;
  border-top: 0;
  border-left: 0;
  font-size: 14px;
  .week-time-table {
    width: 100%;
  }
  .clearfix {
    text-align: left;
  }
}
.flex {
  display: flex;
}
.week-time-table {
  th,
  .week-td {
    height: 24px;
    background: #f8f9fa;
    cursor: pointer;
  }
  th,
  td {
    color: #333;
    text-align: center;
    word-break: keep-all;
    border: 1px solid #ccc;
    min-width: 10px;
    border-bottom: 0;
    border-right: 0;
    user-select: none;
  }
  .hour {
    td {
      cursor: pointer;
    }
  }
  td.selected {
    background: #197afb;
  }
}
.week-time-foot {
  .td-table-tip {
    padding: 10px;
    // color:#ccc;
  }
  p {
    text-align: left;
    margin: 0;
  }
}
</style>
